<template>
    <div class="list">
        <ul v-for="thing in things" :key="thing.name" @click="showEvent">{{thing.name}}</ul>
        <div>
            <p>自定义事件：</p>
            <input type="text" placeholder="输入你要做的事件" @keyup.enter="addEvent" v-model="event">
            <button @click="addEvent">确定</button>
        </div>
    </div>
</template>
<script>

export default{
    name:'ListView',
    data:function(){
        return {
            things:[
                {name:'eat'},
                {name:'sleep'},
                {name:'vue'},
            ],
            event:''
        }
    },
    methods:{
        addEvent:function(){
            this.$router.push('/others/'+this.event)
        },
        showEvent:function(e){
            this.$router.push('/others/'+e.target.outerText)
            console.log(e.target)
        }
    },
    computed:{
        msg:function(){
            return 'aaa'
        }
    }
}
</script>
<style scoped>
li{
    list-style-type: none;
}
</style>
